import { defineStore } from 'pinia'
import { ref, watch } from 'vue'
import type { AppConfig, ThemeConfig } from '@/types'
import { ElMessage } from 'element-plus'

const DEFAULT_THEME: ThemeConfig = {
  mode: 'light',
  primaryColor: '#409EFF',
  chartColors: ['#409EFF', '#67C23A', '#E6A23C', '#F56C6C', '#909399']
}

const DEFAULT_CONFIG: AppConfig = {
  temperatureUnit: 'C',
  language: 'zh-CN',
  autoRefresh: false,
  refreshInterval: 300000, // 5分钟
  theme: DEFAULT_THEME
}

export const useAppConfigStore = defineStore('appConfig', () => {
  // 从localStorage加载配置
  const loadConfig = (): AppConfig => {
    const saved = localStorage.getItem('appConfig')
    if (saved) {
      try {
        return { ...DEFAULT_CONFIG, ...JSON.parse(saved) }
      } catch (error) {
        console.error('加载配置失败:', error)
        return DEFAULT_CONFIG
      }
    }
    return DEFAULT_CONFIG
  }
  
  // 状态
  const config = ref<AppConfig>(loadConfig())
  
  // 快捷访问
  const temperatureUnit = ref(config.value.temperatureUnit)
  const language = ref(config.value.language)
  const theme = ref(config.value.theme)
  const autoRefresh = ref(config.value.autoRefresh)
  const refreshInterval = ref(config.value.refreshInterval)
  
  // 监听配置变化，自动保存
  watch(config, (newConfig) => {
    localStorage.setItem('appConfig', JSON.stringify(newConfig))
  }, { deep: true })
  
  // 切换温度单位
  const toggleTemperatureUnit = () => {
    config.value.temperatureUnit = config.value.temperatureUnit === 'C' ? 'F' : 'C'
    temperatureUnit.value = config.value.temperatureUnit
    ElMessage.success(`已切换到${config.value.temperatureUnit === 'C' ? '摄氏度' : '华氏度'}`)
  }
  
  // 切换主题
  const toggleTheme = () => {
    config.value.theme.mode = config.value.theme.mode === 'light' ? 'dark' : 'light'
    theme.value = config.value.theme
    applyTheme()
    ElMessage.success(`已切换到${config.value.theme.mode === 'light' ? '浅色' : '深色'}主题`)
  }
  
  // 应用主题
  const applyTheme = () => {
    const root = document.documentElement
    if (config.value.theme.mode === 'dark') {
      root.classList.add('dark')
    } else {
      root.classList.remove('dark')
    }
    
    // 设置CSS变量
    root.style.setProperty('--el-color-primary', config.value.theme.primaryColor)
  }
  
  // 更新配置
  const updateConfig = (updates: Partial<AppConfig>) => {
    config.value = { ...config.value, ...updates }
    
    // 更新快捷访问的值
    if (updates.temperatureUnit) temperatureUnit.value = updates.temperatureUnit
    if (updates.language) language.value = updates.language
    if (updates.theme) theme.value = updates.theme
    if (updates.autoRefresh !== undefined) autoRefresh.value = updates.autoRefresh
    if (updates.refreshInterval) refreshInterval.value = updates.refreshInterval
    
    ElMessage.success('配置已更新')
  }
  
  // 重置配置
  const resetConfig = () => {
    config.value = DEFAULT_CONFIG
    temperatureUnit.value = DEFAULT_CONFIG.temperatureUnit
    language.value = DEFAULT_CONFIG.language
    theme.value = DEFAULT_CONFIG.theme
    autoRefresh.value = DEFAULT_CONFIG.autoRefresh
    refreshInterval.value = DEFAULT_CONFIG.refreshInterval
    
    applyTheme()
    ElMessage.success('配置已重置')
  }
  
  // 初始化主题
  applyTheme()
  
  return {
    // 完整配置
    config,
    
    // 快捷访问
    temperatureUnit,
    language,
    theme,
    autoRefresh,
    refreshInterval,
    
    // 方法
    toggleTemperatureUnit,
    toggleTheme,
    updateConfig,
    resetConfig,
    applyTheme
  }
}) 